<template xmlns:el-col="http://www.w3.org/1999/html">
  <div class="table">

    <div class="tool-title">
      <div>
        <el-tooltip effect="dark" content="返回" placement="top-start">
          <el-button @click="goback" style="border: none;">
            <i class="el-icon-back" style="font-size: 16px;font-weight: bold;"></i>返回
          </el-button>
        </el-tooltip>
      </div>
    </div>

    <p class="security-title"> 用户基本信息明细 </p>

    <!-- 主表录入 -->
    <el-card>
      <!-- 头部区块描述 -->
      <div class="divtitle">
        <div class="divtitle-left"></div>
        <div class="divtitle-text">用户基本信息</div>
        <div v-show="true">
          <div v-show="updateflag">
            <el-tooltip class="item" effect="dark" content="批准" placement="top-start">
              <el-button
                  type="warning"
                  icon="el-icon-check"
                  size="medium"
                  circle
                  @click="check" style="float: right; margin-top: -7px;margin-right: 20px">
              </el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="保存" placement="top-start">
              <el-button
                  type="primary"
                  icon="el-icon-edit"
                  size="medium"
                  circle
                  @click="save" style="float: right; margin-top: -7px;margin-right: 20px">
              </el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="删除" placement="top-start">
              <el-button
                  type="danger"
                  icon="el-icon-delete"
                  size="medium"
                  circle
                  @click="del" style="float: right; margin-top: -7px;margin-right: 20px">
              </el-button>
            </el-tooltip>
          </div>
        </div>
      </div>
      <el-form ref="form" :model="basicInformationEntity" label-width="180px">
        <el-row>
          <el-col :span="12">
            <el-form-item prop="username" label="姓名: ">
              <el-input v-model="basicInformationEntity.username" clearable
                        placeholder="姓名"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item prop="studentNumber" label="学号: ">
              <el-input v-model="basicInformationEntity.studentNumber" clearable
                        placeholder="学号"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item prop="gender" label="性别: ">
              <el-input v-model="basicInformationEntity.gender" clearable
                        placeholder="性别"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item prop="contact" label="联系方式: ">
              <el-input v-model="basicInformationEntity.contact" clearable
                        placeholder="联系方式"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item prop="school" label="学校: ">
              <el-input v-model="basicInformationEntity.school" clearable
                        placeholder="学校"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item prop="classGrade" label="班级: ">
              <el-input v-model="basicInformationEntity.classGrade" clearable
                        placeholder="班级"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="education" label="教育学历: ">
              <el-input v-model="basicInformationEntity.education" clearable
                        placeholder="教育学历"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
    </el-card>

    <!-- 第二个区块 -->
    <el-card>
      <!-- 头部区块描述 -->
      <div class="divtitle">
        <div class="divtitle-left"></div>
        <div class="divtitle-text">备注信息</div>
        <el-form ref="form">

          <el-row>
            <el-col :span="24">
              <el-form-item class="input-space" prop="content">
                <el-input clearable
                          placeholder="提示信息：请简要输入备注信息（4000字）" type="textarea" size="medium"
                          :rows="5"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </el-card>

    <el-card style="margin-top: 5px">
      <upload-table v-bind:raid="basicInformationEntity.id"
                    v-bind:linkTableType="linkTableType"
                    v-bind:rnucode="null" v-bind:flag="updateflag"></upload-table>
    </el-card>
    <!-- 删除提示框 -->
    <el-dialog title="提示" :visible.sync="delVisible" width="300px" center>
      <div class="del-dialog-cnt">删除不可恢复，是否确定删除？</div>
      <span slot="footer" class="dialog-footer">
          <el-button @click="delVisible = false">取 消</el-button>
          <el-button type="primary" @click="deleteRow">确 定</el-button>
        </span>
    </el-dialog>

  </div>
</template>


<script>
import {findById, insert, update, del} from "@/config/api";
import uploadTable from "../../components/security/uploadTable.vue";
import gridInput from "../../components/input/gridInput.vue";

export default {
  name: "basicInformationDetail",
  components: {
    uploadTable,
    gridInput
  },
  props: {
    addOrUpdate: {
      type: String
    },
    id: {
      type: String
    }
  },
  data() {
    return {

      // Table Data
      basicInformationData: [],

      // Insert / Update Data Entity
      basicInformationEntity: {
        id: "",
        username: "",
        school: "",
        parentId: "",
        gender: "",
        education: "",
        classGrade: "",
        contact: "",
        studentNumber: ""
      },

      basicId: "",

      addOrUpadte: "1",
      disabled: false,
      loading: false,
      editVisible: false,
      delVisible: false,

      linkTableType: "6",

      updateflag: true,

      addAndUpdate: 1,
    };
  },
  created() {
    this.refresh();
    this.getData();
  },

  methods: {

    // 刷新修改状态
    refresh() {
      if (this.addOrUpdate === "2") {
        this.addAndUpdate = 2;
      } else if (this.addOrUpadte === '1') {
        this.addAndUpdate = 1;
      }
    },


    /**
     * 文件上传
     */
    handleChange(file, fileList) {
      this.fileList = fileList.slice(-3);
    },

    showCont: function () {
      this.show = !this.show;
    },

    // 获取数据
    getData() {
      if (this.addAndUpdate === 2) {

        findById({
          id: this.id
        }).then(res => {
          if (res.data.status) {
            console.log('---> findById: ', JSON.stringify(res.data.data));
            this.basicInformationEntity = {
              id: res.data.data.id,
              username: res.data.data.username,
              school: res.data.data.school,
              parentId: res.data.data.parentId,
              gender: res.data.data.gender,
              education: res.data.data.education,
              classGrade: res.data.data.classGrade,
              contact: res.data.data.contact,
              studentNumber: res.data.data.studentNumber
            }

          } else {
            this.$message.error(res.data.msg);
          }
        });
      } else {
        this.basicInformationEntity = {
          id: "",
          username: "",
          school: "",
          parentId: "",
          gender: "",
          education: "",
          classGrade: "",
          contact: "",
          studentNumber: ""
        };
      }

    },


    //批准
    check() {
    },

    // 新增
    save() {
      // this.$refs['form'].validate(valid => {
      //   if (valid) {
          // 从增加进来
          if (this.addOrUpdate === "1") {

            // 增加
            if (this.addAndUpdate === 1) {
              insert(this.basicInformationEntity).then(res => {
                if (res.data.status) {
                  this.$message.success("新增成功");
                  this.basicId = res.data.data;
                  this.addAndUpdate = 2;
                } else {
                  this.$message.error("新增失败：" + res.data.message);
                }
              });
              // 增加后是修改
            } else if (this.addAndUpdate === 2) {
              update(this.basicInformationEntity).then(res => {
                if (res.data.status) {
                  this.$message.success("修改成功");
                  this.query();
                } else {
                  this.$message.error("修改失败：" + res.data.message);
                }
              });
            }

            // 修改
          } else {
            update(this.basicInformationEntity).then(res => {
              if (res.data.status === true) {
                this.$message.success("修改成功");
                this.getData();
              } else {
                this.$message.error("修改失败：" + res.data.message);
              }
            })
          }
      //   }
      // })
    },
    //查询
    query() {
      this.getData();
    },

    //删除（打开弹出框）
    del() {
      this.delVisible = true;
      this.id = this.basicInformationEntity.id;
    },

    //确认删除
    deleteRow() {
      del({
        id: this.id
      }).then(res => {
        if (res.data.status) {
          this.$message.success("删除成功");
          this.delVisible = false;
          this.goback();
        } else {
          this.$message.error("删除失败：" + res.data.msg);
        }
      });
    },

    /* 当选择项发生改变时触发该事件 */
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    click() {
    },
    handleCurrentChange() {
    },
    totallRows() {
    },
    pageSize() {
    },
    /* pageSize发生改变的事件 */
    handleSizeChange() {

    },
    /* 上一页点击事件 */
    getLastPageData() {

    },
    /* 下一页点击事件 */
    getNextPageData() {

    },

    goback() {
      this.$router.push({
        path: '/basicInformation',
        name: 'basicInformation'
      })
    },
  }
};
</script>
<style scoped>

.handle-box {
  margin-bottom: 20px;
}

.elcon1 {
  height: 100%;
}

.elcon2 {
  height: 100%;
  background-color: #fff;
  border: 1px solid #ddd;
  margin-left: 15px;
  border-radius: 5px;
  font-size: 14px;
}

.elcon3 {
  height: 100%;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 10px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 200px;
  display: inline-block;
}

.del-dialog-cnt {
  font-size: 16px;
  text-align: center
}

.table1 {
  margin-left: 10px;
  width: 80%;
  font-size: 14px;
}

.table {
  width: 100%;
}

.red {
  color: #ff0000;
}

.mr10 {
  margin-right: 10px;
}

.input-suffix {
  margin: 20px;
}

.label {
  margin-right: 50px;
}

.userAuthorityLeft {
  width: 30%;
  color: blue;
}

.isChecked {
  font-size: 20px;
  font-weight: bold;
}
</style>
